<template>
    <div class="debris-list" v-loading="loading">
        <div :class="{ screen: userId }" style="position: relative">
            <div class="input-box" :class="{ 'rent-input-box': userId }">
                <template v-if="!userId">
                    <span class="input-title" style="margin-left:0px;">条件</span>
                    <el-input
                        placeholder="搜索趣ID、订单号、QQ号、游戏昵称"
                        @keyup.enter.native="selectChange"
                        style="width:300px;"
                        clearable
                        v-model.trim="keyWord">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </template>
                <span class="input-title">下单时间</span>
                <el-date-picker
                    @change="getList(1)"
                    v-model="date"
                    :clearable="true"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="input-box" :class="{ 'rent-input-box': userId }">
                <span class="input-title" style="margin-left:0px;">状态</span>
                <el-select @change="getList(1)" style="width:150px;" v-model="status">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="体验中" :value="0"></el-option>
                    <el-option label="待结算" :value="1"></el-option>
                    <el-option label="已完成" :value="2"></el-option>
                    <el-option label="待罚款" :value="3"></el-option>
                </el-select>
                <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>
            </div>
            <div v-if="userId" class="input-box" :class="{ 'rent-input-box': userId }">
                <span class="input-title" style="margin-left:0px;">游戏</span>
                <el-select @change="gameChange" style="width:150px;" v-model="gameChangeVal">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="王者荣耀" value="1104466820"></el-option>
                    <el-option label="和平精英" value="1106467070"></el-option>
                </el-select>
            </div>
            <!-- <el-button type="success" class="btn" @click="exportData" style="position: absolute; right: 10px; top: 0px">导出</el-button> -->
        </div>
        <div class="table-box">
            <el-table :data="tableData" ref="table" border style="width: 100%" @sort-change="sortChange">
                <el-table-column fixed width="160" prop="orderNo" label="订单号"></el-table-column>
                <el-table-column width="170" label="下单时间">
                    <template slot-scope="scope">
                        <div>{{ tableFormatDate(scope.row.startTime) }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" prop="gameName" label="趣游戏用户">
                    <template slot-scope="scope">
                        <p class="table-btn" @click="goUserDetail(scope.row.userId )" v-if="scope.row.userId">趣ID：{{ scope.row.userId }}</p>
                        <p>昵称：{{ scope.row.userName }}</p>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" label="匹配账号">
                    <template slot-scope="scope">
                        <p class="table-btn" @click="goDetail(scope.row.accountNo, scope.row.accountUser, scope.row.dataId)">QQ：{{ scope.row.accountNo }}</p>
                        <p>昵称：{{ scope.row.roleName }}</p>
                        <p>区服：{{ scope.row.serverName }}</p>
                        <p>系统：{{ scope.row.areaType === 1 ? '安卓' : 'ios' }}</p>
                        <template v-if="$route.query.type === 'wzry' || gameId === '1104466820'">
                            <p>英雄数：{{ scope.row.accountHeroCount }}</p>
                            <p>皮肤数：{{ scope.row.accountSkinCount }}</p>
                        </template>
                        <template v-else>
                            <p>载具数：{{ scope.row.peaceTradeOrderVo && scope.row.peaceTradeOrderVo.carrier }}</p>
                            <p>特效枪：{{ scope.row.peaceTradeOrderVo && scope.row.peaceTradeOrderVo.gun }}</p>
                            <p>套装数：{{ scope.row.peaceTradeOrderVo && scope.row.peaceTradeOrderVo.suit }}</p>
                        </template>
                        <p class="table-btn" @click="goUserDetail(scope.row.accountUser )">号主趣ID：{{ scope.row.accountUser }}</p>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" prop="gameName" label="账号估值（元）">
                    <template slot-scope="scope">
                        <p>{{ scope.row.roleWorth || '-' }}</p>
                    </template>
                </el-table-column>
                <el-table-column v-if="$route.query.type === 'wzry' || gameId === '1104466820'" min-width="120" label="下单皮肤">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.tradeWzrySkinList" :key="index">
                            <span>{{ item.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" prop="gameName" label="单价（时/元）">
                    <template slot-scope="scope">
                        <p>{{ scope.row.hourPrice | qbsInitMoney }}</p>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="体验时长" prop="time" sortable="custom"></el-table-column>
                <el-table-column min-width="150" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 0" style="color:#67C23A;">体验中</span>
                        <span v-if="scope.row.status === 1">待结算</span>
                        <span v-if="scope.row.status === 2">已完成</span>
                        <span v-if="scope.row.status === 3" style="color:#F56C6C;">待罚款</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="优惠">
                    <template slot-scope="scope">
                        <div v-if="scope.row.couponPrice">{{ scope.row.couponPrice | qbsInitMoney}} </div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" label="违规" prop="status">
                    <template slot-scope="scope">
                        <p v-for="(item, index) in scope.row.punishDesc" :key="index">
                            {{ item }}
                        </p>
                        <p v-if="scope.row.punishDesc.length === 0">-</p>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" prop="hasApply" label="实付" sortable="custom">
                    <template slot-scope="scope">
                        <div v-if="scope.row.hasApply">{{ scope.row.hasApply | qbsInitMoney}}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="号主所得">
                    <template slot-scope="scope">
                        <div v-if="scope.row.userGetCoin">{{ scope.row.userGetCoin | coinInitMoney }}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="平台收益">
                    <template slot-scope="scope">
                        <div v-if="scope.row.platformCoin">{{ scope.row.platformCoin | coinInitMoney }}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="处理结果">
                    <template slot-scope="scope">
                        <div v-if="scope.row.dealResult">
                            <p v-for="(item, index) in scope.row.dealResult" :key="index">
                                {{ item }}
                            </p>
                        </div>
                        <p v-if="scope.row.dealResult && scope.row.dealResult.length === 0">-</p>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="goOrderDetail(scope.row)" type="text" size="small">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

export default {
    props: ['userId'],
    data () {
        return {
            pageNum: 1,
            pageSize: this._pageSize,
            keyWord: '',
            status: null,
            date: [],
            tableData: [],
            dialogParams: {
            },
            total: 0,
            isAddPay: false,
            loading: false,
            dialogVisible: false,
            type: '',
            sort: '',
            gameId: '1104466820',
            gameChangeVal: ''
        }
    },
    watch: {
        $route: function (route) {
            this.gameId = route.query.gameId ? route.query.gameId : this.gameId
            this.keyWord = ''
            this.getList(1)
        },
        immediate: true
    },
    created () {
        this.getList(1)
    },
    methods: {
        // 打印
        exportData() {
            this.columns = [{
                title: '订单号', key: 'orderNo'
            },
            {
                title: '下单时间', key: 'startTimeDesc'
            },
            {
                title: '趣ID', key: 'userId'
            },
            // {
            //     title: '用户昵称', key: 'userNameDesc'
            // },
            {
                title: '匹配账号', key: 'accountNo'
            },
            {
                title: '账号估值', key: 'roleWorth'
            },
            // {
            //     title: '账号昵称', key: 'roleNameDesc'
            // },
            {
                title: '区服', key: 'serverName'
            },
            {
                title: '系统', key: 'areaName'
            },
            {
                title: '号主ID', key: 'accountUser'
            },
            {
                title: '单价（元）', key: 'hourPriceDesc'
            },
            {
                title: '体验时长', key: 'time'
            },
            {
                title: '体验时长（秒）', key: 'second'
            },
            {
                title: '状态', key: 'statusDesc'
            },
            {
                title: '优惠（元）', key: 'couponPriceDesc'
            },
            {
                title: '违规', key: 'punishDescStr'
            },
            {
                title: '实付（元）', key: 'hasApplyDesc'
            },
            {
                title: '号主所得（元）', key: 'userGetCoinDesc'
            },
            {
                title: '平台收益（元）', key: 'platformCoinDesc'
            },
            {
                title: '处理结果', key: 'dealResultDesc'
            }
            ]
            if (this.$route.query.type === 'wzry') {
                this.columns.splice(9, 0, {title: '英雄数', key: 'accountHeroCount'})
                this.columns.splice(10, 0, {title: '皮肤数', key: 'accountSkinCount'})
                // this.columns.splice(12, 0, {title: '下单皮肤', key: 'tradeWzrySkinListDesc'})
            } else {
                this.columns.splice(8, 0, {title: '载具数', key: 'carrierDesc'})
                this.columns.splice(9, 0, {title: '特效枪', key: 'gunDesc'})
                this.columns.splice(10, 0, {title: '套装数', key: 'suitDesc'})
            }
            this.getList(1, true)
        },
        // 后端排序
        sortChange ({ column, prop, order }) {
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = null
            } else {
                if (this.sort === 'ascending') {
                    this.sort = 'asc'
                } else {
                    this.sort = 'desc'
                }
                this.type = prop
            }
            this.getList(1)
        },
        // 游戏类型切换
        gameChange (val) {
            this.gameChangeVal = val
            this.getList(1)
        },
        // 获取列表
        async getList (pageNum, flag) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            let params = {
                pageNum,
                pageSize: this.pageSize,
                fromDate: '',
                endDate: '',
                gameId: this.$route.query.gameId ? this.$route.query.gameId : this.gameChangeVal
            }
            // 打印
            if (flag) {
                params.pageSize = 1000000
            }
            if (this.type) params.type = this.type
            if (this.sort) params.sort = this.sort
            if (this.keyWord) {
                params.keyWord = this.keyWord
            }
            if (this.userId) params.keyWord = this.userId
            params.status = this.status

            if (this.date && this.date.length) {
                params.fromDate = this.date[0] + ' 00:00:00'
                params.endDate = this.date[1] + ' 23:59:59'
            }

            let res = await this.$http.get('/trade/selectTradeOrderDetail', {
                params
            })
            if (res.code === '0') {
                // 打印
                if (flag) {
                    res.data && res.data.forEach((item) => {
                        item.userNameDesc = item.userName && item.userName.replace(/￿/,'')
                        // item.roleNameDesc = item.roleNameDesc.replace(/￿/,'')
                        item.startTimeDesc = this.tableFormatDate(item.startTime)
                        item.areaName = item.areaType === 1 ? '安卓' : 'ios'
                        item.second = ((item.endTime || (item.startTime + 1000 )) - item.startTime) / 1000
                        if (item.status === 0) {
                            item.statusDesc = '体验中'
                        }
                        if (item.status === 1) {
                            item.statusDesc = '待结算'
                        }
                        if (item.status === 2) {
                            item.statusDesc = '已完成'
                        }
                        if (item.status === 3) {
                            item.statusDesc = '待罚款'
                        }
                        if (this.$route.query.type === 'wzry') {
                            let arr = []
                            item.tradeWzrySkinList && item.tradeWzrySkinList.forEach((it) => {
                                arr.push(it.name)
                            }) 
                            item.tradeWzrySkinListDesc = arr.join(',')
                        } else {
                            if (item.peaceTradeOrderVo) {
                                item.carrierDesc = item.peaceTradeOrderVo.carrier
                                item.gunDesc = item.peaceTradeOrderVo.gun
                                item.suitDesc = item.peaceTradeOrderVo.suit
                            }
                        }
                        item.couponPriceDesc = (item.couponPrice / 100)
                        item.punishDescStr = item.punishDesc && item.punishDesc.join(',')
                        item.hasApplyDesc = (item.hasApply / 100)
                        item.userGetCoinDesc = (item.userGetCoin / 10000).toFixed(2)
                        item.platformCoinDesc = (item.platformCoin / 10000).toFixed(2)
                        item.hourPriceDesc = (item.hourPrice / 100)
                        item.dealResultDesc = item.dealResult && item.dealResult.join(',')
                    })
                    export2Excel(this.columns, res.data, `${this.$route.query.gameId === '1104466820' ? '王者荣耀' : '和平精英'}-租号订单列表`)
                } else {
                    this.tableData = res.data
                    this.total = res.count
                }
                
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        addPay (item) {
            this.dialogVisible = true
            this.isAddPay = true
            this.dialogTitle = '请输入追加金额与理由'
            this.dialogParams.orderId = item.id
        },
        goDetail (accountId, userId, dataId) {
            let path = '/wzry/accDetail'
            if (this.$route.query.type === 'hpjy') {
                path = '/hpjy/accManageDetail'
            }
            const { href } = this.$router.resolve({
                path,
                query: {
                    accountId, userId, dataId
                }
            })
            window.open(href, '_blank')
        },
        goOrderDetail (item) {
            let { id } = item
            let path = '/wzry/orderManageDetail'
            if (this.$route.query.type === 'hpjy') {
                path = '/hpjy/orderManageDetail'
            }
            const { href } = this.$router.resolve({
                path,
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },
        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: '/dataReport/userInfo',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },
        selectChange () {
            this.type = ''
            this.sort = ''
            this.$refs.table.clearSort()
            this.getList(1)
        },
        orderback (item) { // 退款
            this.dialogVisible = true
            this.isAddPay = false
            this.dialogTitle = '请输入退款金额'
            this.dialogParams.orderId = item.id
        },
        dialogSure () {
            if (this.dialogParams.piece < 0) {
                return this.$message({
                    type: 'error',
                    message: '请输入正确的价格'
                })
            }
            let url = '/trade/orderDrawBack'
            if (this.isAddPay) {
                url = '/trade/addPunish'
            }
            this.$http.post(url, this.dialogParams).then(res => {
                if (res.code === '0') {
                    this.dialogVisible = false
                    this.dialogParams = {}
                    this.getList(1)
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },
        tableFormatDate (time) {
            return formatDate(time, 'YYYY-MM-DD HH:MM:SS')
        }
    }
}
</script>

<style lang="scss" scoped>
    .debris-list {
        .screen{
            display: flex;
            align-items: center;
            padding: 20px 0;
        }
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-top: 10px;
                margin-left: 10px;
            }
        }
        .rent-input-box{
            margin: 0 10px 0 0;
            .btn{
                margin-top: 0;
            }
        }

        .table-box {
            margin: 20px 0;
            .cover {
                width: 80px;
                height: 80px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .desc {
                overflow: hidden;
                line-height: 20px;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                height: 100px;
            }
            .user-icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                vertical-align: top;
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
        .dialog-reason {
            margin-top: 20px;
            p {
                margin-bottom: 10px;
            }
        }
    }
</style>
